<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="applyHeight">
      <div class="cornerComment-in-title">
        <span>问卷详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="140px">
          <el-form-item label="问卷标题:" prop="title">
            <el-input v-model="infoForm.title" placeholder="填写问卷标题" v-if="!editId"></el-input>
            <p v-else>{{infoForm.title}}</p>
          </el-form-item>
          <el-form-item label="问卷描述:" prop="description">
            <quill-editor v-model="infoForm.description"
                          ref="myQuillEditor"
                          class="editer"
                          :options="editorOption" @ready="onEditorReady($event)" placeholder="填写问卷描述" v-if="!editId">
            </quill-editor>
            <p v-else v-html="infoForm.description?infoForm.description:'无'"></p>
          </el-form-item>
          <el-form-item label="承诺书:" prop="commitment">
            <div v-if="!editId">
              <el-radio-group v-model="commitment" @change="radiochangeTab">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
              <el-button @click="commitmentBtnFn" size="small" class="ml-20" v-if="commitment==1">编辑承诺书内容</el-button>
            </div>
            <div v-else>
              <el-button @click="commitmentBtnFn" size="small" class="ml-20" v-if="infoForm.commitment">展示承诺书
              </el-button>
              <span v-else>无</span>
            </div>
          </el-form-item>
          <el-form-item label="问卷范围:" prop="title">
            <div v-if="!editId">
              <el-radio-group v-model="infoForm.type" @change="radiochangeTab">
                <el-radio :label="0">全校</el-radio>
                <el-radio :label="1">特定年段</el-radio>
                <el-radio :label="2">特定班级</el-radio>
              </el-radio-group>
            </div>
            <div v-else>
              <span v-if="infoForm.type==0">全校</span>
              <span v-if="infoForm.type==1">特定年段(<span v-for="(item,index) in editsection_id" :key="index">{{item.section_name}}</span>)</span>
              <span v-if="infoForm.type==2">特定班级(<span v-for="(item,index) in editClass_id" :key="index">{{item.class_name}}</span><span
                  v-if="editBody.student_id">,特定学生</span>)</span>
              <span v-if="infoForm.type==2&&editBody.student_id" style="display: block;">
                  <el-tag
                      :key="index"
                      v-for="(tag,index) in editBody.student_id"
                      class="mr-10"
                  >{{tag.name}}
                  </el-tag>
                </span>
            </div>
          </el-form-item>
          <div v-if="!editId">
            <el-form-item label="请选择年段:" v-if="infoForm.type==1">
              <div v-if="!editId">
                <!--<el-select v-model="value1" multiple placeholder="请选择" style="width: 100%;">-->
                <!--<el-option-->
                <!--v-for="item in sectionList"-->
                <!--:key="item.id"-->
                <!--:label="item.section_name"-->
                <!--:value="item.id">-->
                <!--</el-option>-->
                <!--</el-select>-->
                <sectionInputMore @changeSectionMore="changeSectionMore" :value1.sync="value1"></sectionInputMore>
              </div>
              <div v-else>
                <span v-for="(item,index) in editsection_id">{{oldsection[editsection_id[index]].section_name}}{{index+1!==editsection_id.length?',':''}}</span>
              </div>
            </el-form-item>
            <el-form-item label="请选择班级:" v-if="infoForm.type==2">
              <div v-if="!editId" style="display: flex">
                <sectionInput @changeSection="changeSection" :sectionId.sync="infoForm.section_id"></sectionInput>
                <classInput @changeClass="changeClass" :sectionId.sync="infoForm.section_id"
                            :classId.sync="infoForm.class_id"></classInput>
              </div>
              <div v-else>
                <span v-for="(item,index) in editClass_id">{{oldClass[editClass_id[index]].section_id}}-{{oldClass[editClass_id[index]].class_name}}{{index+1!==editClass_id.length?',':''}}</span>
              </div>
            </el-form-item>
            <el-form-item label="是否选择特定学生:" v-if="infoForm.class_id">
              <el-radio-group @change="staduentchange" v-model="studentRadio">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择特定学生:" v-if="studentRadio==1">
              <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择特定学生</el-button>
              <div>
                <el-tag
                    :key="tag"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)"
                    class="mr-10"
                >{{tag}}
                </el-tag>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="问卷开始时间:" prop="end_time">
            <el-col :span="11" v-if="!editId">
              <el-date-picker type="date"
                              placeholder="开始时间"
                              v-model="infoForm.start_time"
                              :picker-options="pickerOptions1"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <p v-else>{{infoForm.start_time}}</p>
          </el-form-item>
          <el-form-item label="问卷结束时间:" prop="end_time">
            <el-col :span="11" v-if="!editId">
              <el-date-picker type="date"
                              placeholder="结束时间"
                              v-model="infoForm.end_time"
                              :picker-options="pickerOptions1"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <p v-else>{{infoForm.end_time}}</p>
          </el-form-item>
          <el-form-item label="问卷内容:">
            <div class="iconlist questionlist" v-for="(item,i) in infoForm.body" v-if="!editId">
              <div style="display: flex;align-items: center;">{{i+1}}.
                <el-input v-model="infoForm.body[i].content" placeholder="填写问卷内容"
                          style="width: 200px;"></el-input>
                <i class="el-icon-circle-plus-outline iconadd addicon" @click="onAdd(i)" v-if="i==0"></i>
                <i class="el-icon-error iconadd detelicon" @click="onDetel(i)" v-else></i>
              </div>
              <div>
                问卷回答类型：
                <el-radio-group v-model="infoForm.body[i].type" @change="radioChange(i)">
                  <el-radio label="1">单选项</el-radio>
                  <el-radio label="2">多选项</el-radio>
                  <el-radio label="3">输入框</el-radio>
                </el-radio-group>
                <span class="infoline">(选项：用户选择ABCD选项；输入框：用户自行输入文字内容)</span>
              </div>
              <!--<div>-->
              <!--老师是否能查看家长反馈明细：-->
              <!--<el-radio-group v-model="infoForm.body[i].show_status">-->
              <!--<el-radio :label="0">否</el-radio>-->
              <!--<el-radio :label="1">是</el-radio>-->
              <!--</el-radio-group>-->
              <!--<span class="infoline">(各个家长反馈后，教师可查看详细的反馈)</span>-->
              <!--</div>-->
              <div>
                本题是否需要签订承诺书：
                <el-radio-group v-model="infoForm.body[i].show_status" @change="commitmentChange(i)">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
                <span class="infoline">(家长需要签名，选项只能填写是否)</span>
              </div>
              <!-- 1单 2 多 3输入 -->
              <div class="questionline" v-if="infoForm.body[i].type==1||infoForm.body[i].type==2">
                <div v-for="(item,indexs) in infoForm.body[i].option" class="questionline-list">
                  <p>
                    {{qustionCheck[indexs]}}.
                    <el-input v-model="infoForm.body[i].option[indexs].text" placeholder="填写选项内容"></el-input>
                    <span v-if="indexs==0">
                          <i class="el-icon-circle-plus-outline iconadd addicon" @click="addlinebox(i)"
                             v-if="infoForm.body[i].option.length<7"></i>
                          </span>
                    <i class="el-icon-error iconadd detelicon" @click="detellinebox(i)" v-else></i>
                  </p>
                  <p>
                    是否添加输入框：
                    <el-radio-group v-model="infoForm.body[i].option[indexs].type">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="2">否</el-radio>
                    </el-radio-group>
                  </p>
                  <p>
                    本选项是否需要签订承诺书：
                    <el-radio-group v-model="infoForm.body[i].option[indexs].is_commitment">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                  </p>
                </div>
              </div>
            </div>
            <div v-else>
              <div v-for="(items,index) in listCheck">
                <!--v-if="items.show_status"-->
                <p>{{index+1}}.{{items.content}}
                  <span class="showWordList" @click="showUserQulityFn(items.id)">(查看家长选项明细)</span>
                  <el-button @click="gotoExcel(index)" class="mb-10" size="mini">导出题目内容excel明细</el-button>
                </p>
                <div v-if="items.type!==3">
                  <div v-for="(line,indexs) in items.option" class="inlinebox">
                    <p>{{line.index}}.{{line.text}} <span>({{line.number}}票)</span>
                      <!--<span v-if="line.type==1">(可输入自定义文字)</span>-->
                    </p>
                    <!--<p v-if="line.type==1" class="showuserAnswer">-->
                    <!--用户提交项：<span v-for="useroption in line.content">（{{useroption}}）</span>-->
                    <!--</p>-->
                    <!--<span class="showWordList" @click="showUserQulityFn(items.id)">(查看单个选项明细)</span>-->
                    <el-button @click="gotoExcelOnly(line,items.id,items.content)" class="mb-10" size="mini">
                      导出单项内容excel明细
                    </el-button>
                  </div>
                </div>
                <div class="inlinebox" v-else>
                  <p>用户自行输入</p>
                  <p class="showuserAnswer">用户提交项：<span v-for="useroption in items.option">（{{useroption}}）</span></p>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
<!--        <el-button size="small" type="primary" @click="onSubmit">修改并保存</el-button>-->
      </div>
    </div>
    <studentMultiple :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                     :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></studentMultiple>
    <commitment :visible.sync="commitmentVisible" @commitmentEditFn="commitmentEditFn" :editId="editId"
                :commitment="infoForm.commitment"></commitment>
    <qustionUser :visible.sync="qustionUserVisible" :optionId="optionId"></qustionUser>
  </div>
</template>

<script>
import {questionDetail, questionEdit} from '@/api/admin/parents_questionnaire'
import {yeartime} from '@/assets/js/common'
import classInput from '@/components/template/classInput.vue'
import sectionInput from '@/components/template/sectionInput.vue'
import sectionInputMore from '@/components/template/sectionInputMore.vue'
import studentMultiple from '@/components/dialog/studentMultiple.vue'
import commitment from '@/components/dialog/commitment.vue'
import qustionUser from '@/components/dialog/qustionUser.vue'

import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  props: ['visible', 'editId'], // tabValue 任务类型
  components: {
    quillEditor,
    classInput,
    sectionInput,
    studentMultiple,
    sectionInputMore,
    commitment,
    qustionUser
  },
  data() {
    return {
      dialogVisible: this.visible,
      qustionCheck: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      editorOption: {
        modules: {
          toolbar: [['bold', 'underline', 'color', 'clean', 'image']]
        }
      },
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      dialogTableVisible: false,
      infoForm: {
        body: [{
          'content': null,
          'type': '1',
          'show_status': 0,
          'option': [{text: '', type: '2', is_commitment: '0'}]
        }],
        title: '',
        class_id: '',
        section_id: '',
        type: 0,
        description: '',
        start_time: yeartime(new Date()),
        end_time: yeartime(new Date()),
        student_id: 0,
        commitment: '' // 承诺书
      },
      commitment: 0, // 承诺书 0否 1是
      commitmentVisible: false,
      qustionUserVisible: false,
      // 表单验证
      rules: {
        title: [
          {required: true, message: '填写问卷标题', trigger: 'blur'}
        ]
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() // - 8.64e7
        }
      },
      arryList: null,
      usersName: null,
      listCheck: [],
      value1: [],
      sectionList: [],
      classesList: [],
      oldClass: {}, // 未处理的班级
      oldsection: {}, // 未处理的年段
      editClass_id: [],
      editsection_id: [],
      studentRadio: 0,
      studentVisible: false,
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      editBody: null,
      optionId: 0,
      deleteId: [],
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      }else{
        this.clearFn()
      }
    }
  },
  created() {

  },
  methods: {
    clearPageData() {
      this.editForm = null
      this.canCheckBtn = false
    },
    // 详情数据
    InitFn() {
      questionDetail({id: this.editId}).then(response => {
        console.log('问卷详情数据：', response)
        if (response.code === 0) {
          this.infoForm.start_time = response.vo.start_time
          this.infoForm.end_time = response.vo.end_time
          this.infoForm.title = response.vo.title
          this.listCheck = response.list
          this.infoForm.type = response.vo.type
          // this.infoForm.class_id = response.vo.class_id
          this.infoForm.description = response.vo.description
          this.infoForm.commitment = response.vo.commitment
          if (response.vo.commitment) {
            this.commitment = 1
          }
          // 0全校 1特定年段 2特定班级
          if (Number(response.vo.type) === 1) {
            // this.editsection_id = response.vo.section_id
            this.infoForm.section_id = response.vo.section_id[0].id
          } else if (Number(response.vo.type) === 2) {
            // this.editClass_id = response.vo.class_id
            this.infoForm.section_id = response.vo.section_id[0].id
            this.infoForm.class_id = response.vo.class_id[0].id
          }
          this.editBody = response.vo
          this.infoForm.body = response.list
        } else {
        }
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    onEditorReady(editor) {
    },
    onAdd(index) {
      // this.infoForm.body.push({
      //   'content': null,
      //   'type': '1',
      //   'show_status': 0,
      //   'option': [{text: '', type: '2', is_commitment: '0'}]
      // })
      this.infoForm.body.splice(index+1, 0, {
        'content': null,
        'type': '1',
        'show_status': 0,
        'option': [{text: '', type: '2', is_commitment: '0'}]
      })
    },
    addlinebox(i) {
      this.infoForm.body[i].option.push({text: '', type: '2', is_commitment: '0'})
    },
    detellinebox(i) {
      this.infoForm.body[i].option.splice(i, 1)
    },
    onDetel(index) {
      console.log('this.infoForm.body:', this.infoForm.body)
      if (this.infoForm.body[index].id) {
        this.deleteId.push(this.infoForm.body[index].id)
      }
      this.infoForm.body.splice(index, 1)
    },
    // 设置默认选中
    checked() {
      console.log('默认选项判断', this.applyBookBox)
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.applyBookBox[this.arryList[i].id]) {
          console.log('数值', i)
          this.$refs.table.toggleRowSelection(this.arryList[i], true)
        }
      }
    },
    radioChange(e) {
      if (this.infoForm.body[e].type == 3) {
        this.infoForm.body[e].option = []
      } else {
        this.infoForm.body[e].option = [{text: '', type: '2', is_commitment: '0'}]
      }
    },
    radiochangeTab(option) {
      this.infoForm.section_id = ''
      this.section_id = ''
      this.infoForm.class_id = ''
      this.value1 = []
    },
    onSubmit() {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      console.log('数据提交', this.infoForm, this.value1)
      if (!this.infoForm.title) {
        this.$message({
          message: '请填写问卷标题',
          type: 'error'
        })
        return
      }
      if (this.commitment === 1 && !this.infoForm.commitment) {
        this.$message({
          message: '请填写承诺书内容',
          type: 'error'
        })
        return
      }
      // 1单 2 多 3输入
      for (let i in this.infoForm.body) {
        if (!this.infoForm.body[i].content) {
          this.$message({
            message: '请填写问卷内容',
            type: 'error'
          })
          return
        }
        if (this.infoForm.body[i].type == 1 || this.infoForm.body[i].type == 2) {
          for (let j in this.infoForm.body[i].option) {
            if (!this.infoForm.body[i].option[j].text) {
              console.log('none')
              this.$message({
                message: '请填写问卷选项',
                type: 'error'
              })
              return
            }
          }
        }
      }
      if (Number(this.infoForm.type) === 1 && this.value1.length) {
        this.infoForm.section_id = this.value1.join(',')
      }
      if (Number(this.infoForm.type) === 1 && !this.infoForm.section_id) {
        this.$message({
          message: '请选择特定年段',
          type: 'error'
        })
        return
      }
      if (Number(this.infoForm.type) === 2 && !this.infoForm.class_id) {
        this.$message({
          message: '请选择特定班级',
          type: 'error'
        })
        return
      }
      if (this.studentRadio === 1 && this.infoForm.student_id === 0) {
        this.$message({
          message: '请选择特定学生',
          type: 'error'
        })
        return
      }
      let data_ = {}
      let body_ = this.infoForm.body
      for (let i in body_) {
        if (body_[i].type !== 3) {
          for (let j in body_[i].option) {
            body_[i].option[j]['index'] = this.qustionCheck[j]
          }
        }
      }
      data_.title = this.infoForm.title
      data_.type = this.infoForm.type
      data_.class_id = this.infoForm.class_id
      data_.start_time = this.infoForm.start_time
      data_.end_time = this.infoForm.end_time
      data_.body = JSON.stringify(body_)
      data_.section_id = this.infoForm.section_id
      data_.student_id = this.infoForm.student_id
      data_.description = this.infoForm.description
      data_.commitment = this.infoForm.commitment// 承诺书
      data_.id = this.editId// 承诺书
      data_.delete_id = this.deleteId.join(',')
      console.log('提交信息data_：', data_)

      this.$refs['infoForm'].validate((valid) => {
        console.log('状态：', valid)
        if (valid) {
          questionEdit(data_).then(res => {
            if (!res.code) {
              this.$message.success('编辑成功')
              this.$emit('getInit')
            } else {
              this.$message.error(res.msg)
            }
          })
          // this.$post(this.api.questionnaire.examine_edit, data_).then(res => {
          //   if (!res.code) {
          //     this.$message.success('编辑成功')
          //   } else {
          //     this.$message.error(res.msg)
          //   }
          // })
        }
      })
    },
    changeSection(option) {
      console.log('改变了班级1：', option)
      this.infoForm.class_id = ''
      this.infoForm.section_id = option
    },
    changeClass(option) {
      console.log('改变了班级：', option)
      this.infoForm.class_id = option
    },
    changeSectionMore(option) {
      this.value1 = option
    },
    staduentchange() {
      if (this.studentRadio === 0) {
        this.dynamicTags = []
        this.dynamicTagsId = []
        this.dynamicTagsArray = {}
        this.infoForm.student_id = 0
      }
    },
    chooseStudent() {
      console.log('idname:', this.infoForm.section_id, this.infoForm.class_id)
      this.studentVisible = true
    },
    studentFn(option) {
      console.log('接受到的数据：', option)
      for (let i in option) {
        this.dynamicTags.push(option[i].name)
        this.dynamicTagsId.push(option[i].id)
        this.dynamicTagsArray = option
      }
      this.infoForm.student_id = this.dynamicTagsId.join(',')
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.student_id = this.dynamicTagsId.join(',')
    },
    commitmentEditFn(option) {
      this.infoForm.commitment = option
    },
    commitmentBtnFn() {
      this.commitmentVisible = true
    },
    // 查看明细
    showUserQulityFn(id) {
      this.optionId = id
      this.qustionUserVisible = true
    },
    commitmentChange(index) {
      console.log('文件：', this.infoForm.body)
      if (this.infoForm.body[index].show_status === 1) {
        for (let i in this.infoForm.body) {
          if (Number(i) !== index) {
            this.infoForm.body[i].show_status = 0
          }
        }
      }
    },
    gotoExcel(index) {
      this.$http({
        method: 'get',
        url: `${this.$BASE_URL}/admin/`+this.api.task.excel + '?id=' + this.listCheck[index].id,
        responseType: 'arraybuffer'
      })
          .then(
              function (response) {
                this.fileDownload(response.data, this.listCheck[index].content)
              }.bind(this)
          )
          .catch(
              function (error) {
                alert('网络请求出错')
              }
          )
    },
    gotoExcelOnly(line, id, title) {
      console.log('内容信息：', line, id, title)
      this.$http({
        method: 'get',
        url: `${this.$BASE_URL}/admin/`+this.api.task.sign_export + '?question_id=' + id + '&option=' + line.index,
        responseType: 'arraybuffer'
      })
          .then(
              function (response) {
                this.fileDownload(response.data, title + ',' + line.index + '.' + line.text)
              }.bind(this)
          )
          .catch(
              function (error) {
                alert('网络请求出错')
              }
          )
    },
    fileDownload(data, pushname) {
      let blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      let filename = pushname + '-填写明细.xls' || 'filename.xls'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },
    clearFn() {
      this.infoForm = {
        body: [{
          'content': null,
          'type': '1',
          'show_status': 0,
          'option': [{text: '', type: '2', is_commitment: '0'}]
        }],
        title: '',
        class_id: '',
        section_id: '',
        type: 0,
        description: '',
        start_time: yeartime(new Date()),
        end_time: yeartime(new Date()),
        student_id: 0,
        commitment: '' // 承诺书
      }
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
  }
}
</script>
<style scoped>

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 94%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 30px;
  flex: 1;
  overflow-y: auto;
  /*background: #eee;*/
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}

.task-box {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
}

.task-box-title {
  border-left: 3px solid #009bfb;
  padding-left: 10px;
  height: 15px;
  line-height: 15px;
}

.task-line-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-detail-title {
  display: block;
  width: 75px;
}

.task-box-detail {
  margin-top: 20px;
}

.file-link {
  color: #1b8de5;
  cursor: pointer;
}

.file-link:hover {
  text-decoration: underline;
}

.task-status {
  color: red;
}

.task_file_list {
  text-align: center;
  color: #999;
}
</style>
